<template>
    <div>
        <el-table :data="tableData" stripe style="width: 100%" @row-dblclick="cellclick"  :row-class-name="tableRowClassName" 
            size="mini"  v-loading="loading">
            <el-table-column type="index" label="序号" min-width="10">
            </el-table-column>
            <el-table-column prop="name" label="音乐标题" min-width="25">
            </el-table-column>
            <el-table-column label="歌手" min-width="23">
                <template slot-scope="scope">
                    <p class="scroll">
                        <span v-for="(item, index) in scope.row.ar" :key="index"> {{ item.name }} <span
                                v-if="index != scope.row.ar.length - 1"> / </span> </span>
                    </p>
                </template>
            </el-table-column>
            <el-table-column prop="al[name]" label="专辑" min-width="22">
            </el-table-column>
            <el-table-column  label="时间" min-width="10">
                <template slot-scope="scope">
                    <p class="scroll">
                        {{timeTranstion(scope.row.dt)}}
                    </p>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
import { GetUserplaylist,Getplaylist, Getplaylistssss } from "@/api/Playlist";
export default {
    data() {
        return {
            tableData: [],
            currentRow: null,
            loading:true
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        // 每一行添加索引
        tableRowClassName ({row, rowIndex}) {
            row.index = rowIndex;
        },
        PlaylistDetails(id) {
            // 拿到总数据的id
            Getplaylist(id).then(res => {
                // console.log(res.data,'歌单信息');
                // 将总数据的id分离出来
                const musicIdList = res.data.playlist.trackIds.map(
                    item => {
                        return Number(item.id)
                    }
                )
                // 放入请求参数中
                return Getplaylistssss(musicIdList.join(','))
                // 请求结果
            }).then(res => {
                let songs = res.data.songs
                console.log(songs, '@@@@@@');
                this.tableData = songs
            })
        },
        cellclick(row) {
            console.log(row.index, '索引');
            Promise.resolve(this.$store.commit("PlaylistDetails/setPlayList", this.tableData)).then(res => {
                
                this.$store.commit("PlaylistDetails/setPlayListIndex", row.index);
            })

        },
        // 时长转换
        timeTranstion(timer) {
            const timerDate = timer/1000 
            let m = Math.floor(timerDate / 60 % 60)
            m = m>=10?m:'0'+m
            let s = Math.floor(timerDate % 60)
            s = s>=10?s:'0'+s
            return `${m} : ${s}`
        }
    },
    watch:{
        $route(){
            this.PlaylistDetails(this.$route.query.id)
            this.loading=false
        }  
    },
    created() {
            this.PlaylistDetails(this.$route.query.id)
            this.loading=false
    }
}
</script>

<style lang="less" scoped>

.scroll{
    color: rgb(139, 139, 139);  
    white-space: nowrap; 
    overflow-x: scroll;
}
.scroll::-webkit-scrollbar {
  	display: none;
}
</style>